<?php
/**
 * Created by PhpStorm.
 * User: zhanglu
 * Date: 2019/4/8
 * Time: 1:57 PM
 */

$per_url = Yii::$app->params['imgurl'];
$setting = Yii::$app->setting;
$tag = \common\components\Tools::tagToTxt($model->mark);
$tagstr = '';
if($tag){
    foreach($tag as $v){
        $tagstr .= $v['cont'] . ',';
    }
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="keywords" content="<?=$tagstr . $model['front_title']?>">
    <meta name="Description" content="<?=$model['intro']?>">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title><?=$model['front_title']?></title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            padding:0px;
            margin:0px;
            background:#fff;
        }
        .book-item{padding:15px;display:flex;align-items: center}
        .book-item .thumb{width:100px;flex:1;}
        .book-item .mycontent{padding-left:20px;flex:3;}
        .book-item .mycontent .title{font-size:24px;color:#333}
        .book-item .mycontent .desc{font-size:16px;font-weight:300;color:#333;text-align: justify;}
        .booklist a{text-decoration: none;}
        .sec-one a{text-decoration: none;}

        .qrcode-modal{display:none;width:100%;height:100%;position: fixed;z-index:999;top:0px;left:0px;background: rgba(0,0,0,.6)}
        .qrcode-download-modal{display:none;width:100%;height:100%;position: fixed;z-index:999;top:0px;left:0px;background: rgba(0,0,0,.6)}

        .sec-three ul{padding: 0px;margin: 0px}
        .sec-three ul li{list-style: none;overflow: hidden;}
        .sec-three ul li a{display: block;margin-top: 30px;}
        .sec-three li a {
            width: 30%;
            margin-right: 5%;
            float: left;
            text-decoration: none;
        }
        .sec-three li a img {
            width: 100%;
            display: block;
            border: 1px solid #E6E6E6;
            border-radius: 6px;
        }
        .sec-three li a h3{
            text-align: center;
            font-size: 16px;
            line-height:32px;
            color:#333;
            margin-top: 15px;
            padding: 0;
            border: 0;
        }
        .sec-three li a:nth-child(3n) {
            margin-right: 0;
        }
        .jishu{margin: 0 15px}
        .jishu ul{margin: 0px;padding: 0px;}
        .jishu ul li{padding: 8px 20px;border:1px solid #ff5754;color:#ff5754;list-style: none;float: left;border-radius: 6px;margin-top: 15px;margin-right: 15px}
        .jishu ul li a{color:#ff5754;}
        .mymark{background: #ff5754;padding: 8px 20px;font-size:14px;margin-right: 6px;border-radius: 6px;box-shadow: 0 0 6px #ff5754;color:#fff;}
        .tag-item{background: #fff;padding: 8px 20px;font-size:14px;margin-right: 6px;border-radius: 6px;box-shadow: 0 0 6px #fff;color:#ff5754;border:1px solid #ff5754}
    </style>

</head>
<body>
<div class="page-book-catalog" style="padding:0px 20%">
    <div class="header" style="padding:0px 50px;display: flex;align-items: center;height:80px;width:100%;background: #f88b8f;position: fixed;top:0px;left:0px">
        <div style="flex: 1;">
            <img src="/img/logo.png" style="width:60px" alt="">
        </div>
        <div style="flex: 1;text-align: right">
            <a class="download" href="javascript:void(0);" data-url="http://www.51manshe.com/app/android.apk" style="font-size: 16px;color:#fff;font-weight: 500;">Android 下载</a>
        </div>
    </div>
    <div style="height:120px;width:100%;"></div>

    <div class="booklist">

        <a style="text-decoration: none;" class="bookitem" href="javascript:;" data-url="http://www.51manshe.com/news/<?=$model['number']?>.html">
            <div class="book-item">
                <div class="thumb">
                    <img src="<?=$per_url . $model['thumb_img']?>" alt="<?=$model['front_title']?>" style="width:80%;border-radius: 6px;box-shadow: 0 0 2px #999">
                </div>
                <div class="mycontent">
                    <p style="padding:10px 0px">
                        <?php if($model->is_over == 1){ ?>
                            <span class="mymark">完结</span>
                        <?php }else{ ?>
                            <span class="mymark">更新中</span>
                        <?php }?>
                        <?php if($model->is_recommend == 1){?>
                            <span class="mymark">推荐</span>
                        <?php }?>
                        <?php if($model->is_hot == 1){?>
                            <span class="mymark">热门</span>
                        <?php }?>
                    </p>
                    <h4 class="title"><?=$model['front_title']?></h4>
                    <p class="desc" style="line-height: 2"><?=$model['intro']?></p>
                    <div class="tag" style="margin-top: 30px">

                        <?php foreach( $tag as $v){?>
                            <span class="tag-item"><?=$v['cont']?></span>
                        <?php }?>

                    </div>
                    <p class="remark" style="text-align: right;font-size: 14px;margin-top: 30px">
                        <span style="padding: 6px 20px;border:1px solid #ff5754;border-radius: 6px;color:#ff5754;margin-right: 15px;"><?=$model['click_num']?> 人气</span>
                        <span style="padding: 6px 20px;border:1px solid #333;border-radius: 6px;color:#333"><?=$model['zan_num']?> 收藏</span>
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </a>
        <div style="display: none"><a href="http://51manshe.com/news/<?=$model['number']?>.html"><?=$model['front_title']?></a></div>

    </div>

    <div class="jishu">

        <ul>
            <?php foreach($list as $v){ ?>
                <li><a href="http://www.51manshe.com/book-item/<?=$model['number']?>.html"><?=$v['front_title']?></a></li>
            <?php }?>
        </ul>
        <div style="clear: both"></div>
    </div>

    <div class="sec-three" style="margin: 15px">
        <div class="product-list-header" style="">
            <h3>猜你喜欢</h3>
        </div>
        <ul>
            <li>
                <?php foreach($like as $v){ ?>
                    <a href="/news/<?=$v['number']?>.html">
                        <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover">
                        <h3><?=$v['front_title']?></h3>
                    </a>
                <?php }?>
            </li>
        </ul>
    </div>


    <div class="qrcode-modal">
        <div style="position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)">
            <div id="qrcode" style="box-shadow: 0 0 6px #333"></div>
            <p style="color:#fff;font-size: 16px;text-align: center;margin-top: 15px;">请使用手机浏览器或微信打开</p>
            <p style="color:#fff;font-size: 16px;text-align: center;margin-top: 15px;">Android体验更+ （ 右上角下载 ）</p>
        </div>
    </div>

    <div class="qrcode-download-modal">
        <div style="position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)" >
            <div id="qrcode-download" style="box-shadow: 0 0 6px #333"></div>
            <p style="color:#fff;font-size: 16px;text-align: center;margin-top: 15px;">Android下载 请使用手机浏览器扫码</p>
        </div>
    </div>



</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>

    var decviceWidth=$(window).width();
    var sw = decviceWidth - 110;
    $('.mycontent').css('width',sw + 'px');

    $('.bookitem').click(function(){
        $('.qrcode-modal').fadeIn(500);
        var url = $(this).data('url');
        console.log(url)
        $('#qrcode').qrcode(url);
    });

    $('.download').click(function(){
        $('.qrcode-download-modal').fadeIn(500);
        var url = $(this).data('url');
        console.log(url)
        $('#qrcode-download').qrcode(url);
    });

    $('.qrcode-modal').click(function(){
        $('.qrcode-modal').fadeOut(500);
        $('#qrcode').html('')
    });

    $('.qrcode-download-modal').click(function(){
        $('.qrcode-download-modal').fadeOut(500);
        $('#qrcode-download').html('')
    });

</script>
